<template>
  <div class="computed-box">
    <span class="computed-title">计算场次:</span>
    <div class="sessions-box">
      <div v-if="state.forCal.length > 0">
        <span
          :class="['sessions-box-item', currentTime == index ? 'active' : '']"
          v-for="(item, index) in state.forCal[0].ccInfo"
          :key="index"
          @click="calBtn(item, index)"
          >{{ item.code }}</span
        >
      </div>
      <div class="nullData" v-else>
        <span>暂无计算场次</span>
      </div>
    </div>
    <div class="computed-title">各场次计算结果:</div>
    <div class="res-box-flex">
      <div class="mg-bottom">
        <span class="com-name">场次名称：</span>
        <span class="com-name name-font">{{ state.ccName }}</span>
      </div>
      <div class="mg-bottom">
        <span class="com-name">开始/结束时间：</span>
        <span class="com-name name-font">{{
          state.startTime + '\u00a0\u00a0\u00a0' + state.endTime
        }}</span>
      </div>
    </div>

    <div class="computed-bottom">
      <span class="com-name">计算耗时：</span>
      <span class="name-font mag-right">{{ state.calTake }}</span>
      <span class="com-name">评定结果：</span>
      <span class="name-font name-font1">{{ state.isPsss ? '合格' : '不合格' }}</span>
    </div>
    <div class="computed-table">
      <el-table
        border
        :data="state.tableData"
        style="width: 100%"
        highlight-current-row
        size="small"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="forecastMaxQ"
          label="模拟洪锋（m³/s）"
          align="center"
          show-overflow-tooltip
          width="120px"
        />
        <el-table-column
          prop="realMaxQ"
          label="实测洪锋（m³/s）"
          align="center"
          width="120px"
          show-overflow-tooltip
        />
        <el-table-column
          prop="difQ"
          width="120px"
          label="洪锋相对误差%"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="forecastMaxV"
          label="模拟洪量（10⁶m³）"
          align="center"
          show-overflow-tooltip
          width="130px"
        />
        <el-table-column
          prop="realMaxQ"
          label="实测洪量（10⁶m³）"
          align="center"
          show-overflow-tooltip
          width="130px"
        />

        <el-table-column
          prop="difQ"
          label="洪锋相对误差%"
          align="center"
          width="130px"
          show-overflow-tooltip
        />
        <el-table-column
          prop="forecastMaxTm"
          label="模拟峰现时间"
          align="center"
          show-overflow-tooltip
          width="110px"
        />
        <el-table-column
          prop="realMaxTm"
          label="实测峰现时间"
          align="center"
          show-overflow-tooltip
          width="110px"
        />
        <el-table-column prop="difTm" label="误差(时段)h" align="center" show-overflow-tooltip />
        <el-table-column
          prop="allowDifTm"
          label="许可误差（时段）h"
          align="center"
          show-overflow-tooltip
          width="130px"
        />

        <el-table-column
          prop="cerCoe"
          label="确定性系数"
          align="center"
          width="100px"
          show-overflow-tooltip
        />
      </el-table>
    </div>
    <div class="echarts-box">
      <morey-chart
        height="100%"
        :x-labels="state.sysTimes"
        :realwater-level="state.rzArr"
        :rain-area="state.rainArr"
        :simulate-water="state.fzArr"
        :real-flow="state.rqArr"
        :simulate-flow="state.fqArr"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'

import moreyChart from '@/components/app-echart/morey-chart.vue'
import cal_result_new from '@/assets/data/com_data/cal_result_new.json'
import xaj_verify_info from '@/assets/data/com_data/xaj_verify_info'
const currentTime = ref(0)
const state = reactive({
  ccName: '',
  startTime: '',
  endTime: '',
  calTake: '',
  newCptArr: [],
  forCal: [],
  tableData: [],
  isPsss: '',
  //时间
  sysTimes: [],
  //降雨量
  rainArr: [],
  //实测流量
  rqArr: [],
  //模拟流量
  fqArr: [],
  //实测水位
  rzArr: [],
  //模拟水位
  fzArr: []
})

function clearEchart() {
  state.sysTimes = []
  state.rainArr = []
  state.rqArr = []
  state.fqArr = []
  state.rzArr = []
  state.fzArr = []
}
// 计算场次事件
const calBtn = (item, index) => {
  clearEchart()
  currentTime.value = index
  state.tableData = state.newCptArr.evaResult.filter((i) => {
    return i.code === item.code
  })
  state.ccName = item.code
  state.startTime = state.tableData[0].startTm
  state.endTime = state.tableData[0].endTime
  state.calTake = 24
  state.isPsss = state.tableData[0].qualified
  let newArr = state.newCptArr.forecastResult.filter((v) => {
    return v.ccCode === item.code
  })
  newArr[0]?.resultData.forEach((v, vIndex) => {
    state.sysTimes.push(v.tm)
    state.rainArr.push(v.p)
    state.rqArr.push(v.rq)
    state.fqArr.push(v.fq)
    state.rzArr.push(v.rz)
    state.fzArr.push(v.fz)
  })
}
const changeDataComputed = (id) => {
  // 清空上一个id对应的数据
  clearEchart()
  state.ccName = ''
  state.startTime = ''
  state.endTime = ''
  state.calTake = ''
  state.newCptArr = []
  state.tableData = []
  state.forCal = []
  state.isPsss = ''
  // 过滤
  let arrXaj = xaj_verify_info.filter((t) => {
    return t.blkcd === id
  })
  // 如果存在对应id的数据则赋值
  if (arrXaj.length > 0 && arrXaj[0].verifySchemes) {
    let arr = cal_result_new.filter((e) => {
      return e.blkcd === id
    })
    state.newCptArr = arr[0]
    // 过滤xaj
    state.forCal = arrXaj[0].verifySchemes
    calBtn(state.forCal[0]?.ccInfo[0], 0)
  }
}

const props = defineProps({
  tabsId: {
    type: String,
    default: ''
  }
})
watch(
  () => props.tabsId,
  () => {
    changeDataComputed(props.tabsId)
  }
)
onMounted(() => {
  changeDataComputed(props.tabsId)
})
</script>

<style lang="less" scoped>
.computed-box {
  width: 100%;
  height: 100%;
  font-size: var(--content-fontsize);
  .computed-title {
    margin-bottom: 10px;
    display: block;
    font-weight: 600;
  }
  .res-box-flex {
    display: flex;
    align-items: center;
  }
  .mg-bottom {
    margin-bottom: 10px;
    margin-right: 5px;
  }
  .com-name {
    color: #797979;
  }
  .name-font {
    font-weight: 600;
    color: black;
  }
  .name-font1 {
    color: rgb(151, 244, 11);
  }

  .computed-bottom {
    margin-top: 10px;
    margin-bottom: 5px;
    .mag-right {
      margin-right: 60%;
    }
  }
  .sessions-box {
    width: 100%;
    height: 40px;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 10px;
    .nullData {
      width: 100%;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #797979;
    }

    .sessions-box-item {
      display: inline-block;
      width: 150px;
      height: 30px;
      line-height: 30px;
      margin-right: 9px;
      text-align: center;
      border-radius: 8px;
      border: 1px solid gray;
      color: gray;
      cursor: pointer;
      &.active {
        color: #0154db;
      }
    }
    // .sessions-box-item:hover {
    //   border: 1px solid #0154db;
    //   color: #0154db;
    // }
  }
  .computed-table {
    width: 100%;
    height: 80px;
  }
  .echarts-box {
    margin-top: 30px;
    width: 100%;
    height: calc(100% - 275px);
  }
}
</style>
